<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 swiper 的样式 -->
    <link rel="stylesheet" href="../lib/swiper-bundle.min.css" />
    <style>
      .swiper {
        width: 500px;
        height: 300px;
        border: 1px solid #000;
      }

      .swiper img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.min.js"></script>
    <!-- 引入 swiper 的类库 -->
    <script src="../lib/swiper-bundle.min.js"></script>
    <script>
      const vm = new Vue({
        template: `
          <div>
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in banners" :key="index">
                      <img :src="item" />  
                    </div>
                </div>
            </div>

            <button @click="handleAdd">增加一份轮播图</button>
          </div>
        `,
        el: "#app",
        data: {
          banners: [], // 轮播图数据 ['imgUrl', 'imgUrl']
        },
        methods: {
          handleAdd() {
            this.banners = [...this.banners, ...this.banners];

            // 重新通知 swiper ，让其内部重新计算
            this.$nextTick(() => {
              this.mySwiper.update();
            });
          },

          fetchData() {
            axios
              .get(
                "https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=754097",
                {
                  // 配置请求头
                  headers: {
                    "X-Host": "mall.film-ticket.film.list",
                  },
                }
              )
              .then((response) => {
                console.log("response", response.data);
                // 将 response.data.data.films 赋值给 banners 且只需要海报数据
                this.banners = response.data.data.films.map(
                  (item) => item.poster
                );

                // 数据的修改，会引起页面更新，但这需要时间呀。如果需要再真实DOM更新之后再做一些事情，可以通过 this.$nextTick() 来处理

                // this.$nextTick(() => {
                //   console.log(
                //     document.querySelectorAll(".swiper-slide").length
                //   );
                //   var mySwiper = new Swiper(".swiper", {});
                // });

                this.$nextTick(() => {
                  // 调用 mySwiper 的 update 方法，通知 swiper 重新基于最新的DOM来渲染内容。
                  this.mySwiper.update();
                });
              });
          },
        },

        beforeMount() {
          // 挂载之前，实例化
          //    这时页面还没有 .swiper 这个元素呢，实例化会失败
          // console.log(document.querySelector(".swiper"));
          // var mySwiper = new Swiper(".swiper", {});
        },

        mounted() {
          // 问题1. 轮播图数据是异步获取的，在数据还没有获取到的时候，Swiper 初始化就已经走完了，这时 轮播是由Bug的。
          // 解决方案1： 在数据获取完成之后，真实DOM更新之后，再实例化Swiper
          // 解决方案2： 在数据获取完成之后，真实DOM更新之后，调用 swiper 实例对象的 实例方法来更新

          // 调用 fetchData
          this.fetchData();

          console.log(document.querySelectorAll(".swiper-slide").length);
          this.mySwiper = new Swiper(".swiper", {});
          console.log("mySwiper", this.mySwiper);

          // setTimeout(() => {
          //   // 挂载完成，实例化
          //   console.log(document.querySelector(".swiper"));
          //   var mySwiper = new Swiper(".swiper", {});
          // }, 2000);
        },
      });
    </script>
  </body>
</html>
